<template>
<div>
<el-container>
    <!-- 侧边 -->
  <el-aside :width="isCollapse ? '' : '200px' ">

  <el-menu 
  class="el-menu-vertical-demo" 
  @open="handleOpen" 
  @close="handleClose" 
  :collapse="isCollapse"
  :router="true"
  >
  
<div class="menu_logo">
  <el-menu-item class="menu_logo_item" index="/index">
      <template #title></template>
    </el-menu-item>
</div>

    <el-menu-item index="/homepage">
      <i class="el-icon-menu"></i>
      <template #title>主页</template>
    </el-menu-item>
  
  <el-submenu index="1">
    <template #title>
      <i class="el-icon-location"></i>
      <span>学生</span>
    </template>
    
    <el-submenu index="2">
      <template #title>管理</template>
      <el-menu-item index="/student">信息</el-menu-item>
    </el-submenu>
  </el-submenu>

  <el-menu-item index="/">
    <i class="el-icon-menu"></i>
    <template #title>导航二</template>
  </el-menu-item>

  <el-menu-item index="/" disabled>
    <i class="el-icon-document"></i>
    <template #title>导航三</template>
  </el-menu-item>

</el-menu>

    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header class="container_header">

        <div class="menu_collspsed">

          
            <span @click="CollspsedButton" class="icon_size">
              <i class="el-icon-s-fold"></i>
            </span>

          <bread></bread>

        </div>

        <div class="menu_dropdown">
          <el-dropdown class="dropdown_class">
           <a class="header_img">
            <img src="../assets/logo.png" style="width:57px">
          </a>
          
           <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="details">个人资料</el-dropdown-item>
                <el-dropdown-item @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>

          </el-dropdown>
        </div>

      </el-header>

      <!-- 主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>

</div>
  
</template>

<script>
import router from '../router';
import Bread from './common/bread'


export default {
  components: {
    Bread,
  },
  data() {
   return {
      isCollapse: false,
    }
  },
  methods: {
    CollspsedButton(){
      this.isCollapse = !this.isCollapse;
    },
    logout(){
      router.push('/login')
    },
    details(){
      router.push('/personal')
    }
  },
  mounted() {
   
  },
}
</script>

<style lang="less" scoped>
.container_header{
  box-shadow: 0 0 25px #cac6c6;
   padding: 0 20px;
  height: 64px;
  padding-right: 50px;
}
.header_img{
  cursor: pointer;
  float: right;
  width: 57px;
  height: 57px;
}
.menu_dropdown{
  float: right;
}
.icon_size{
    cursor: pointer;
    margin-top: 17px;
    font-size: 25px;
    float:left;
  }
.menu_logo{
  height: 60px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.425);
  // margin: auto;
  line-height: 60px;
  text-align: center;
  color: #cac6c6;
  background-image: url("../assets/bg1.jpg");
  .menu_logo_item{
    height: 62px;
    color: rgb(43, 198, 226);
  }
}
</style>
